<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex items-center pt-26px pl-26px pr-26px" v-if="isShowRemind">
            <Remind @update:data="handleRemindUpdate">
                <template #title>
                    <b> 温馨提示：</b>
                </template>
                <template #content>
                    1、在使用“产品导入”功能时，导入成功后请在“关键词待设置”列表添加关键词，经审核后系统会自动上架并开始推广。<br>
2、若系统提示“产品已达上限”，请先下架并删除现有的无需继续推广的产品，再添加新产品进行推广。 
                </template>
            </Remind>
        </div>
        <div class="flex justify-between pt-26px pl-26px pr-26px relative">
            <Tabs v-model="activeIndex" @update:model-value="handleTabClick" active-color="#ffffff">
                <TabItem label="关键词待设置" :quantity="state.keywordsLength" :index="0">
                    <div v-loading="state.isLoading">
                        <Keyword :tab="state.tab" :tableData="state.keywordsData" :page="state.page" @update:data="handleUpdateKeywordsData" />
                    </div>
                </TabItem>
                <TabItem label="待审核" :quantity="state.pendingLength" :index="1">
                    <Keyword :tab="state.tab" :tableData="state.keywordsData" :page="state.page" @update:data="handleUpdateKeywordsData" />
                </TabItem>
                <TabItem label="未通过" :quantity="state.failLength" :index="2">
                    <Keyword :tab="state.tab" :tableData="state.keywordsData" :page="state.page" @update:data="handleUpdateKeywordsData" />
                </TabItem>
                <TabItem label="已下架" :quantity="state.downedLength" :index="3">
                    <Keyword :tab="state.tab" :tableData="state.keywordsData" :page="state.page" @update:data="handleUpdateKeywordsData" />
                </TabItem>
            </Tabs>
            <div class="flex items-center absolute right-26px">
                <div class="text-14px mr-15px">您已发布 <el-text type="primary" class="font-bold">{{ state.publishedProduct }}</el-text> 个产品，还能发布 <el-text type="success" class="font-bold">{{ state.publishProduct }}</el-text> 个产品</div>
                <el-button :loading="state.loading" type="primary" @click="handleImport"><svg-icon size="18px" icon-class="import-line" class="mr-4px"></svg-icon>产品导入</el-button>
            </div>
        </div>

        <ProductImport v-model:isImport="state.isImport" :publishedProduct="state.publishedProduct" :publishProduct="state.publishProduct" @closeDialog="handleClose" @updatePublishProduct="updatePublishProduct" />

        <ConfirmDialog
            ref="confirmDialogRef"
            message="导入产品已达上线"
        />
    </div>
</template>

<script setup lang="ts">
import Tabs from '@/components/Tab/First.vue'
import TabItem from '@/components/Tab/Item.vue'
import Keyword from './components/Keyword.vue'
import ProductImport from './components/ProductImport.vue'
import ConfirmDialog from '@/components/ConfirmDialog/index.vue'
import { keywordsApi,importProductApi } from '@/api/b2b'
import { useUserStore } from "@/store/modules/user"
import { WarningFilled } from '@element-plus/icons-vue'
import { confirmMessageBox } from '@/utils/elMessageBox'

const isShowRemind = ref(true)

const activeIndex = ref(0)

const confirmDialogRef = ref()

const route = useRoute()

const state = reactive({
    keywordsData:[],
    page:{
        total:0,
        curPage:1,
        limit:10,
        pageSizes:10,
    },
    classification:1,//分类
    status:0,   //状态
    tab:1,
    isImport:false,
    publishedProduct:0, //已发布产品
    publishProduct:0,   //还可以发布产品
    totalProduct:0,  //可发布总产品数
    keywordsLength:0,
    pendingLength:0,
    failLength:0,
    downedLength:0,
    isLoading:true,
    loading:false
})

const userStore = useUserStore()

const user = computed(() => userStore.user)

function handleRemindUpdate(){
    isShowRemind.value = !isShowRemind.value
}

function handleTabClick(val:any) {
    //每次切换的时候重置分页，重新获取数据
    const { index } = val
    activeIndex.value = index
    state.page.curPage = 1
    state.page.pageSizes = 10

    if(index === 0){
        state.classification = 1
        state.status = 0
        state.tab = 1
        getList()
    }else if(index === 1){
        state.classification = 3
        state.status = 0
        state.tab = 2
        getList()
    }else if(index === 2){
        state.classification = 4
        state.status = 0
        state.tab = 3
        getList()
    }else if(index === 3){
        state.classification = 0
        state.status = 2
        state.tab = 4
        getList()
    }
}

function handleUpdateKeywordsData(value:any){
    state.page.curPage = value.curPage
    state.page.pageSizes = value.pageSizes
    getList()
}

async function getList(){
    const res: ResType = await keywordsApi({
        State: state.classification,
        IsUpperShelf: state.status,
        pn: state.page.curPage,
        pagesize: state.page.pageSizes,
        username: user.value.username
    });
    if(res.code === 200){
        state.isLoading = false
        state.keywordsData = res.data;
        state.page.curPage = res.page as number
        state.page.pageSizes = res.pagesize as number
        state.page.total = res.count
        state.publishProduct = res.yuCount
        state.publishedProduct = res.fabuCount
        state.totalProduct = res.productNumber
        state.keywordsLength = res.wckcount7
        state.pendingLength = res.wckcount3
        state.failLength = res.wckcount4
        state.downedLength = res.wckcount5
    }
    
}

async function handleImport(){
    try{ 
        state.loading = true
        const res: ResType = await importProductApi()
        if(res.code === 200){
            state.loading = false
            state.isImport = true
        }
    } catch (error:any) {
        if (error.response && error.response.status === 405){
            confirmMessageBox(WarningFilled,error.response.message)
        }
    }
}

async function handleClose(){
    state.isImport = false
    state.publishProduct = state.totalProduct - state.publishedProduct
    await getList()
}

function updatePublishProduct(n:number){
    state.publishProduct = state.totalProduct - state.publishedProduct - n
    if(state.publishProduct < 0){
        confirmDialogRef.value?.showConfirm()
    }
}

onMounted(() => {
    const tabIndex = route.query
    if(tabIndex.index){
        handleTabClick({ index: 1 })
    }else{
        handleTabClick({ index: 0 })
    }
})
</script>

<style scoped>

</style>